<template>
  <div id="app">
    <NavBar v-if="$route.meta.showNavBar"></NavBar>
    <main>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
      <div
        :class="{
          'web-container': deviceType == 'web',
          'mobile-container': deviceType == 'mobile',
          'ipad-container': deviceType == 'ipad',
        }"
      >
        <button class="go-top-button" v-if="showGoTop" @click="scrollToTop">
          up
        </button>
      </div>
    </main>
    <FooterBar v-if="$route.meta.showFooterBar" ref="footer"></FooterBar>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  computed: {
    showNavBar() {
      return this.$route.meta.showNavBar !== false;
    },
    showFooterBar() {
      return this.$route.meta.showFooterBar !== false;
    },
  },
  beforeCreate() {},
  created() {},
  methods: {},
};
</script>
<style lang="scss">
@import "~@/assets/global.css";
</style>
